<template>
	<div class="menu-button" :title="name" @click="onButtonClick">
		<Tooltip trigger="hover" placement="top" :content="name" transfer theme="light">
			<div :class="iconClass" :style="backgroundStyle">&nbsp;</div>
			<div :class="reflectionClass" :style="backgroundStyle">&nbsp;</div>
		</Tooltip>
	</div>
</template>
<script type="text/javascript">
import { Tooltip } from 'view-design';
export default {
	name: "MenuButton",
	props: {
		active: {
			type: Boolean,
			default: false
		},
		icon: String,
		name: String
	},
	computed: {
		iconClass() {
			return ["menu-icon", this.active ? "menu-icon-animate" : ""];
		},
		reflectionClass() {
			return ["reflection", this.active ? "reflection-animate" : ""];
		},
		backgroundStyle() {
			return {
				"background-image": "url(" + this.icon + ")"
			}
		}
	},
	methods: {
		onButtonClick() {
			this.$emit("click");
		}
	},
	components: {
		Tooltip
	}
}
</script>
<style type="text/css" scoped>
.menu-button {
    width: 60px;
    float: left;
    margin-top:10px;
    margin-left:5px;
    margin-right:5px;
    cursor: pointer;
}

.menu-button .menu-icon {
    width: 60px;
    height: 60px;
    background-size:100% 100%;
}

.menu-button .reflection {
    width: 60px;
    height: 60px;
    background-size:100% 100%;
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv;
    opacity: 0.20;
    filter: alpha(opacity=20);
}

/***********菜单动画***************/
.menu-icon-animate {
    animation:iconmove 0.5s infinite;
    -webkit-animation:iconmove 0.5s infinite; /* Safari 和 Chrome */
    -moz-animation:iconmove 0.5s infinite;
    -ms-animation:iconmove 0.5s infinite; 
    -o-animation:iconmove 0.5s infinite;
    animation-direction:alternate;
    -webkit-animation-direction:alternate; /* Safari 和 Chrome */
    -moz-animation-direction:alternate;
    -ms-animation-direction:alternate;
    -o-animation-direction:alternate;
}

.reflection-animate {
    animation:reflectionmove 0.5s infinite;
    -webkit-animation:reflectionmove 0.5s infinite; /* Safari 和 Chrome */
    -moz-animation:reflectionmove 0.5s infinite;
    -ms-animation:reflectionmove 0.5s infinite; 
    -o-animation:reflectionmove 0.5s infinite;
    animation-direction:alternate;
    -webkit-animation-direction:alternate; /* Safari 和 Chrome */
    -moz-animation-direction:alternate;
    -ms-animation-direction:alternate;
    -o-animation-direction:alternate;
}

@keyframes iconmove {
    from {margin-top:0px;}
    to {margin-top:-6px;}
}

@-webkit-keyframes iconmove {
    from {margin-top:0px;}
    to {margin-top:-6px;}
}

@-moz-keyframes iconmove {
    from {margin-top:0px;}
    to {margin-top:-6px;}
}

@-ms-keyframes iconmove {
    from {margin-top:0px;}
    to {margin-top:-6px;}
}

@-o-keyframes iconmove {
    from {margin-top:0px;}
    to {margin-top:-6px;}
}

@keyframes reflectionmove {
    from {margin-top:0px;}
    to {margin-top:12px;}
}

@-webkit-keyframes reflectionmove {
    from {margin-top:0px;}
    to {margin-top:12px;}
}

@-moz-keyframes reflectionmove {
    from {margin-top:0px;}
    to {margin-top:12px;}
}

@-ms-keyframes reflectionmove {
    from {margin-top:0px;}
    to {margin-top:12px;}
}

@-o-keyframes reflectionmove {
    from {margin-top:0px;}
    to {margin-top:12px;}
}
</style>